<template>
  <div class="transQuery_main">
    <h3>上级记录查询</h3>
    <a-table
      size="middle"
      :scroll="{ y: '38vh' }"
      :columns="columns"
      :dataSource="list"
      :pagination="false"
      :rowKey="record => record.transOrderNo"
    >
      <span slot="transTime" slot-scope="record">{{record.transTime | timeFilter}}</span>
      <span slot="amount" slot-scope="record">{{(record.amount/100).toFixed(2)}}</span>
      <span slot="action" slot-scope="record">
        <span @click="goDetail(record.transOrderNo)" style="color:#1890ff;">详细</span>
      </span>
    </a-table>
    <a-pagination
      @change="onPageChange"
      :current="pagination.current"
      :total="pagination.total"
      :pageSize="query.pageSize"
      style="margin-top: 20px"
    />
  </div>
</template>

<script>
import AForm from "ant-design-vue/es/form/Form";
import ATabs from "ant-design-vue/es/tabs";
import AFormItem from "ant-design-vue/es/form/FormItem";
import AInput from "ant-design-vue/es/input/Input";
import AIcon from "ant-design-vue/es/icon";
import AInputGroup from "ant-design-vue/es/input/Group";
import AButton from "ant-design-vue/es/button/button";
import ACol from "ant-design-vue/es/grid/Col";
import ARow from "ant-design-vue/es/grid/Row";
import ACheckbox from "ant-design-vue/es/checkbox/Checkbox";
import AAlert from "ant-design-vue/es/alert/index";
import moment from "moment";
import api from "@/common/api";
const ATabPane = ATabs.TabPane;

const columns = [
  { title: "批次号", dataIndex: "transferBatchNo", width: "10%", align: "center" },
  {
    title: "操作时间",
    dataIndex: "ctime",
    width: "10%",
    align: "center"
  },
  {
    title: "操作方",
    dataIndex: "operatorName",
    width: "10%",
    align: "center"
  },
  {
    title: "执行动作",
    dataIndex: "typeName",
    width: "10%",
    align: "center"
  },
  {
    title: "起始SN设备号",
    dataIndex: "startSncode",
    width: "15%",
    align: "center"
  },
  {
    title: "结束SN设备号",
    dataIndex: "endSncode",
    width: "15%",
    align: "center"
  },
  { title: "合计数量", dataIndex: "nums", width: "15%", align: "center" },
//   { title: "活动名称", dataIndex: "transName", width: "15%", align: "center" }
];

export default {
  name: "Login",
  components: {
    AAlert,
    ACheckbox,
    ACol,
    ARow,
    AButton,
    AInputGroup,
    AIcon,
    AInput,
    AFormItem,
    ATabPane,
    ATabs,
    AForm
  },

  data() {
    return {
      columns,
      list: [],
      pagination: { current: null, total: null },
      query:{
          current:1, 
          pageSize:10
      }
    };
  },
  mounted() {
    this.getParentHistory();
  },
  methods: {
    getParentHistory() {
        this.$axios.post("/agent/agent/terminal/getParentHistory",this.query).then(res => {
        if (res.data.code == "OK") {
          this.list = res.data.list;
          this.pagination.current = res.data.current
          this.pagination.total = res.data.total
        } else {
          this.list = [];
          this.pagination.current = null
          this.pagination.total = null
          this.$message.error(res.data.message);
        }
      });
    },
    onPageChange: function(page, pageSize) {
      console.info(page, pageSize);
      this.query.current = page;
      this.query.pageSize = pageSize;
      this.getParentHistory();

    },
  }
};
</script>

<style lang="less" scoped>
span {
  cursor: pointer;
}

span {
  cursor: pointer;
}

.formGroupTitle {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
}

.ant-tabs-nav {
  float: right;
}

.amountColor {
  color: #29a576;
  font-weight: 400;
}

.amountSize {
  font-size: 20px;
  padding: 0 5px;
}

.expand {
  display: flex;
  align-items: center;
  justify-content: center;
}

.transQuery_main {
  padding: 40px 70px;
  background: #fff;
}

.button_sty {
  width: 100%;
}

.modalClass {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-top: 40px;
  padding-bottom: 20px;
}

.modalClass span {
  font-size: 17px;
  font-weight: 400;
  margin-top: 5px;
  margin-bottom: 5px;
}

.modalClass p {
  margin-bottom: 10px;
}

.footClass {
  width: 60%;
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}
</style>